<template>
  <div class="theme-active-text-color content">
   <div class="agree_content">
     <div class="agree_top">
       <div>合同编号：{{agreeDetail.agree_id}}</div>
       <div>签订人：{{agreeDetail.applyer}}</div>
     </div>
     <div class="agree_detail">
       <div v-for="(item,index) in nameList" :key="index">
          <el-button @click="searchBtn(item)" type="primary" plain>{{item}}  {{priceList[index]}}</el-button>
       </div>
     </div>
   </div>
   <div class="input_list">
     <search-table-template tableTitleTxt='送货记录'>

       <template slot="headerContent">
          <el-form :inline="true" :model="pageData" class="demo-form-inline "  style="padding:15px">
          <el-form-item label="材料名称">
            <el-input clearable v-model="pageData.name" placeholder="材料名称"></el-input>
          </el-form-item>
          <el-form-item label="是否合同内">
            <el-select v-model="pageData.inAgree" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getSendList">查询</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="tableTitleRight">
        <el-button type="primary" @click="download">下载表格</el-button>
      </template>
        <template slot="tableContent">
          <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="name"
            label="材料名称"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="count"
            label="送货数量"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="price"
            label="送货价格"
            align="center"
            >
          </el-table-column>
           <el-table-column
            prop="inAgree"
            label="是否合同内"
            align="center"
            >
            <template slot-scope="scope">
              <span>{{ scope.row.inAgree == '1' ? '是':'否' }}</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="sendImg"
            label="送货小票"
            align="center"
            >
            <template slot-scope="scope">
              <img :src="scope.row.sendImg" @click="showImg(scope.row.sendImg)" class="list_img"/>
              </template>
          </el-table-column>
           <el-table-column
            prop="priceImg"
            label="调价函"
            align="center"
            >
            <template slot-scope="scope">
              <img :src="scope.row.priceImg" @click="showImg(scope.row.priceImg)" class="list_img"/>
              </template>
          </el-table-column>
          <el-table-column
            prop="times"
            label="录入时间"
            align="center"
            >
            <template slot-scope="scope">
              <span>{{ scope.row.times | filterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="times"
            label="录入人员"
            align="center"
            >
            <template slot-scope="scope">
              <span>{{ scope.row.is_complete == 0 ? '':'' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            :pageData="pageData"
            @onSearch="paginationSearch(arguments)"
        ></pagination>
        
        </template>
    </search-table-template>

   </div>

   <el-dialog
      title="查看"
      :visible.sync="showDialog"
      width="60%"
      :before-close="handleClose">
      <img :src="showImgUrl" />
    </el-dialog>
  </div>
</template>

<script>
import SearchTableTemplate from '../../components/template/SearchTableTemplate.vue';
import Pagination from "@/components/Pagination";
import { agreeDetailApi,sendRecordList } from '@/api';

export default {
  name: "",
  components: {
    SearchTableTemplate,
    Pagination
  },
  data() {
    return {
      agree_id:'',
      agreeDetail:{},
      nameList:[],
      priceList:[],
      tableData:[],
      pageData: {
        id:'',
        name:'',
        inAgree:'',
        pageNum: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      options:[{
        value:'1',
        label:'是'
      },
      {
        value:'2',
        label:'否'
      },
      {
        value:'',
        label:'全部'
      }],
      showDialog:false,
      showImgUrl:"",
    };
  },
  created() {
    this.agree_id = this.$route.query.agree_id;
    this.pageData.id = this.$route.query.agree_id;
    this.detail();
    this.getSendList()
  },
  filters:{
    filterTime(val){
      let time = new Date(val)
      let year = time.getFullYear()
      let mouth = time.getMonth()+1
      let date = time.getDate()
      return year+'-'+mouth+'-'+date
    }
  },
  methods: {
    async detail(){
      let res = await agreeDetailApi({
        agree_id:this.agree_id
      })
      if(res){
        console.log(res)
        this.agreeDetail = res.data[0]
        this.nameList = res.data[0].kind.split('，');
        this.priceList = res.data[0].price.split('，');
      }
    },

    async getSendList(){
      let res = await sendRecordList(this.pageData)
      if(res){
        console.log(res)
        this.tableData = res.data.dataList;
        this.pageData.pageTotal = res.data.all
      }
    },

    paginationSearch(data) {
      this.pageData.pageSize = data[1];
      this.pageData.pageNum = data[0];
      this.getSendList();
    },

    searchBtn(item){
      this.pageData.name = item;
      this.getSendList();
    },

    showImg(url){
      this.showDialog = true;
      this.showImgUrl = url;
    },

    handleClose(){
      this.showDialog = false;
    }

  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: .1rem;
  display: flex;

  .agree_content{
    width: 28%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;

    .agree_top{
      width: 100%;
      height: .5rem;
      box-sizing: border-box;
      display: flex;
      color: #000;
      font-size: .14rem;
      padding: 20px;
      font-weight: 600;
      justify-content: space-between;
      align-items: center;
      background: rgb(207, 230, 243);
    }

    .agree_detail{
      padding: 10px;
      color: rgb(87, 85, 85);
      font-size: .14rem;
      text-align: center;
      .title{
        font-size: .15rem;
        color: #000;
        margin-bottom: 10px;
      }
      .el-button--primary.is-plain{
        width:100%;
        margin:5px 0;
      }
    }
  }

  .input_list{
    width: 72%;
    margin-left: 10px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;
  }

  .list_img{
    width: 80%;
  }

  
}

</style>